<template>
	<view class="patrol-page">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-content">
				<view class="page-title">
					<text class="title-text">巡查管理</text>
					<text class="subtitle-text">{{getPatrolTypeName()}}巡查记录</text>
				</view>
				<view class="nav-actions">
					<view class="action-btn" @click="refreshData">
						<text class="action-icon">🔄</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 筛选控制按钮 -->
		<view class="filter-control">
			<view class="filter-btn" @click="chargeFilter" :class="{ 'active': showFilter }">
				<text class="filter-icon">{{ showFilter ? '📋' : '🔍' }}</text>
				<text class="filter-text">{{ showFilter ? '收起筛选' : '条件筛选' }}</text>
			</view>
		</view>
		
		<!-- 筛选面板 -->
		<view class="filter-panel" v-if="showFilter">
			<view class="filter-content">
				<view class="filter-title">
					<text class="title-text">筛选条件</text>
				</view>
				
				<view class="filter-form">
					<!-- 巡查工地 -->
					<view class="form-item">
						<text class="item-label">巡查工地</text>
						<picker class="item-picker" @change="bindProtectChanges" range-key="cn"
							:value="cprojectIndex" :range="cprojects">
							<view class="picker-value">
								<text class="value-text">{{cprojects[cprojectIndex].cn}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>
					
					<!-- 巡查结果 -->
					<view class="form-item">
						<text class="item-label">巡查结果</text>
						<picker class="item-picker" @change="bindPresultChanges" range-key="cn"
							:value="presultindex" :range="presults">
							<view class="picker-value">
								<text class="value-text">{{presults[presultindex].cn}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>
					
					<!-- 巡查模式 -->
					<view class="form-item">
						<text class="item-label">巡查模式</text>
						<picker class="item-picker" @change="bindPickerChanges" range-key="cn"
							:value="index" :range="pModes">
							<view class="picker-value">
								<text class="value-text">{{pModes[index].cn}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>
				</view>
				
				<!-- 筛选按钮 -->
				<view class="filter-actions">
					<view class="action-btn reset-btn" @click="resetFilter">
						<text class="btn-text">重置</text>
					</view>
					<view class="action-btn search-btn" @click="filter">
						<text class="btn-text">搜索</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 巡查列表 -->
		<scroll-view class="patrol-list" scroll-y>
			<view v-if="cpatrolList.length === 0" class="empty-state">
				<view class="empty-icon">
					<text class="icon-large">📋</text>
				</view>
				<text class="empty-title">暂无巡查记录</text>
				<text class="empty-desc">当前条件下没有找到相关巡查记录</text>
			</view>
			
			<view v-for="(item, index) in cpatrolList" :key="index" class="patrol-item">
				<view class="item-card" @click="updateCpatrol(item.pid)">
					<!-- 卡片头部 -->
					<view class="card-header">
						<view class="header-left">
							<text class="create-time">{{item.inserttime}}</text>
							<text class="patrol-id">编号: {{item.pid}}</text>
						</view>
						<view class="header-right">
							<view class="status-badge" :class="{'status-passed': item.presult === '合格', 'status-failed': item.presult === '不合格', 'status-pending': item.presult !== '合格' && item.presult !== '不合格'}">
								<text class="status-text">{{item.presult}}</text>
							</view>
						</view>
					</view>
					
					<!-- 项目名称 -->
					<view class="project-name">
						<text class="name-text">{{item.cproject}}</text>
					</view>
					
					<!-- 详细信息 -->
					<view class="card-details">
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">巡查类型</text>
								<text class="detail-value">{{item.ptype}}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">巡查模式</text>
								<text class="detail-value">{{item.pmode}}</text>
							</view>
						</view>
						
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">巡查人</text>
								<text class="detail-value">{{item.pman1}}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">总得分</text>
								<text class="detail-value score-value">{{item.totalscore}}</text>
							</view>
						</view>
						
						<view class="detail-row">
							<view class="detail-item full-width">
								<text class="detail-label">巡查时间</text>
								<text class="detail-value">{{item.patroltime}}</text>
							</view>
						</view>
						
						<view class="detail-row" v-if="item.rf_flow_node">
							<view class="detail-item full-width">
								<text class="detail-label">整改流程节点</text>
								<text class="detail-value flow-node">{{item.rf_flow_node}}</text>
							</view>
						</view>
					</view>
					
					<!-- 操作按钮区域 -->
					<view class="card-actions">
						<view class="action-tag">
							<text class="tag-text">点击查看详情</text>
							<text class="tag-arrow">›</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { request } from '@/request/index.js'
	import { STORAGE_KEYS, PATROL_TYPES } from '@/constants/index.js'
	import { getStorage, showToast, showLoading, hideLoading } from '@/utils/index.js'

	export default {
		data() {
			return {
				// 巡查列表数据
				cpatrolList: [],
				
				// 筛选相关
				showFilter: false,
				
				// 巡查模式
				pmode: '',
				pModes: [],
				index: 0,
				
				// 巡查结果
				presult: '',
				presults: [],
				presultindex: 0,
				
				// 巡查项目
				cproject: '',
				cprojects: [],
				cprojectIndex: 0,
				
				// 用户信息
				userInfo: {},
				
				// 巡查类型
				ptype: ''
			}
		},
		
		onShow() {
			this.getCpatrol({})
		},
		
		onLoad(option) {
			this.checkUserAuth()
			this.ptype = option.ptype || '01'
			this.initPageData()
		},
		
		onPullDownRefresh() {
			this.refreshData()
		},
		methods: {
			/**
			 * 检查用户权限
			 */
			checkUserAuth() {
				const userInfo = getStorage(STORAGE_KEYS.USER_INFO)
				if (!userInfo) {
					showToast('请先登录')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 1000)
					return false
				}
				this.userInfo = userInfo
				return true
			},
			
			/**
			 * 初始化页面数据
			 */
			initPageData() {
				this.getCpatrol({})
				this.getPmode()
				this.getPresults()
				this.getProjects()
			},
			
			/**
			 * 刷新数据
			 */
			async refreshData() {
				try {
					showLoading('刷新中...')
					await this.getCpatrol({})
					showToast('刷新成功')
				} catch (error) {
					showToast('刷新失败')
				} finally {
					hideLoading()
					uni.stopPullDownRefresh()
				}
			},
			
			/**
			 * 获取巡查类型名称
			 */
			getPatrolTypeName() {
				switch (this.ptype) {
					case '01':
						return '文明施工'
					case '02':
						return '安全监督'
					case '03':
						return '质量管理'
					default:
						return '巡查'
				}
			},
			goReform(pid){
				uni.redirectTo({
					url:"/pages/reform/reform?pid="+pid
				})
			},
			//提交限期整改
			reform(pid){
				var data ={}
				data = {pids:pid}
				request({
					url: "/patrol2/limitRectifySubmit",
					method: "POST",
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					if (res.data.success == true) {
						uni.showToast({
							title: '操作成功',
							
						})
						this.getCpatrol({})
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			//二级审核通过
			approved2(pid){
				var data ={}
				data = {pids:pid}
				request({
					url: "/patrol2/limitRectifyPass2",
					method: "POST",
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.success == true) {
						uni.showToast({
							title: '操作成功',
							
						})
						this.getCpatrol({})
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			reject2(pid){
				var data ={}
				uni.redirectTo({
					url:"/pages/reject2/reject2?pid="+pid
				})
			},
			//一级复查通过
			review1Pass(pid){
				var data ={}
				data = {pids:pid}
				request({
					url: "/patrol2/checkLimitRectifyPass1",
					method: "POST",
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.success == true) {
						uni.showToast({
							title: '操作成功',
							
						})
						this.getCpatrol({})
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			//一级复查驳回
			review1reject(pid){
				var data ={}
				data = {pids:pid}
				var data ={}
				uni.redirectTo({
					url:"/pages/reject2/reject2?pid="+pid
				})
			},
			
			
			//二级复查通过
			review2Pass(pid){
				var data ={}
				data = {pids:pid}
				request({
					url: "/patrol2/checkLimitRectifyPass2",
					method: "POST",
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.success == true) {
						uni.showToast({
							title: '操作成功',
							
						})
						this.getCpatrol({})
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			//二级复查驳回
			review2reject(pid){
				var data ={}
				data = {pids:pid}
				request({
					url: "/patrol2/checkLimitRectifyDeny2",
					method: "POST",
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.success == true) {
						uni.showToast({
							title: '操作成功',
							
						})
						this.getCpatrol({})
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			uploadReform(pid){
				var data ={}
				data = {pids:pid}
				request({
					url: "/patrol2/handleRectify1",
					method: "POST",
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.success == true) {
						uni.showToast({
							title: '操作成功',
							
						})
						this.getCpatrol({})
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			
			updateCpatrol(pid){
				
				uni.navigateTo({
					url:"/pages/updateCpatrol/updateCpatrol?pid="+pid+"&ptype="+this.ptype
				})
			},
			
			addcapatrol(){
				uni.redirectTo({
					url:"/pages/add_cipdetail/add_cipdetail"
				})
			},
			filter(){
				var data = {}
				if(this.pmode.toString().trim()!=''){
					data.query_pmode = this.pmode
				}
				if(this.presult.toString().trim()!=''){
					data.query_presult = this.presult
				}
				console.log(this.cproject)
				if(this.cproject.toString().trim()!=''){
					data.query_cproject = this.cproject
				}
				this.getCpatrol(data)
			},
			//查看明细
			goCpatrolDetail(pid){
				
				uni.redirectTo({
					url:"/pages/cpatrol_detail/cpatrol_detail?pid="+pid
				})
			},
			//巡查单
			getCpatrol(data) {
				var that = this
				data.sort = 'updatetime'
				data.order = 'desc'
				data.query_ptype=that.ptype
				var uri = ""
				if(this.ptype=='01'){
					uri = "/thirdGrid/query/c_cpatrol-m_cpatrol"
				}if(this.ptype=='02'){
					uri = "/thirdGrid/query/c_spatrol-m_spatrol"
				}if(this.ptype=='03'){
					uri = "/thirdGrid/query/c_qpatrol-m_qpatrol"
				}
				
				request({
					url: uri,
					method: "POST",
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.success == true) {
						that.cpatrolList = res.data.rows
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			
			
			
			
			
			
			
			bindPickerChanges(e) {
				this.index = e.detail.value
				this.pmode = this.pModes[this.index].id
			},
			
			bindPresultChanges(e) {
				this.presultindex = e.detail.value
				this.presult = this.presults[this.presultindex].id
			},
			
			bindProtectChanges(e) {
				this.cprojectIndex = e.detail.value
				this.cproject = this.cprojects[this.cprojectIndex].id
			},
			getPmode() {
				request({
					url: '/thirdWidget/comboJson/c_cpatrol-pmode',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': getStorage(STORAGE_KEYS.TOKEN)
					}
				}).then(res => {
					if (res.data.code === '200') {
						this.pModes = res.data.data.map(item => ({
							id: item.id || ' ',
							cn: item.cn || '无'
						}))
						this.pmode = (this.pModes[this.index] && this.pModes[this.index].id) || ''
					}
				})
			},
			getPresults() {
				var that = this
				request({
					url: "/thirdWidget/comboJson/c_cpatrol-presult",
					method: "POST",
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.code == '200') {
						that.presults = []
						for (var i = 0; i < res.data.data.length; i++) {
			
							var result = {}
							result.id = res.data.data[i].id
							result.cn = res.data.data[i].cn
							if (result.id == '') {
								result.id = ' '
								result.cn = '无'
							}
							that.presults.push(result)
						}
						that.presult = that.presults[that.presultindex].id
			
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
			getProjects() {
				var that = this
				request({
					url: "/thirdWidget/findJson?code=c_cpatrol&field=cproject",
					method: "POST",
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'cookie': uni.getStorageSync('cookie')
					}
				}).then(res => {
					
					if (res.data.success == true) {
						that.cprojects = [{id:' ',cn:'无'}]
						for (var i = 0; i < res.data.rows.length; i++) {
			
							var project = {}
							project.id = res.data.rows[i].cpid
							project.cn = res.data.rows[i].csname
							if (project.id == '') {
								project.id = ' '
								project.cn = '无'
							}
							that.cprojects.push(project)
						}
						that.cproject = that.cprojects[that.cprojectIndex].id
			
					} else {
						uni.showToast({
							title: res.data.msg,
							
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.patrol-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: $bg-secondary;
}

/* 顶部导航栏 */
.nav-header {
	background: $primary-gradient;
	padding: $spacing-lg;
	padding-top: calc(var(--status-bar-height, 0) + #{$spacing-lg});
	border-radius: 0 0 $border-radius-xl $border-radius-xl;
	box-shadow: $shadow-base;
}

.nav-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.page-title {
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

.title-text {
	font-size: $font-size-xl;
	font-weight: 600;
	color: $text-white;
}

.subtitle-text {
	font-size: $font-size-sm;
	color: rgba(255, 255, 255, 0.8);
}

.nav-actions {
	display: flex;
	gap: $spacing-sm;
}

.action-btn {
	width: 70rpx;
	height: 70rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: $border-radius-base;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: $transition-base;

	&:active {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(0.95);
	}
}

.action-icon {
	font-size: $font-size-lg;
}

/* 筛选控制按钮 */
.filter-control {
	padding: $spacing-lg;
}

.filter-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: $spacing-sm;
	padding: $spacing-md $spacing-lg;
	background: $primary-color;
	border-radius: $border-radius-lg;
	transition: $transition-base;
	box-shadow: $shadow-sm;

	&:active {
		background: $primary-dark;
		transform: translateY(2rpx);
	}

	&.active {
		background: $gray-600;
	}
}

.filter-icon {
	font-size: $font-size-lg;
	color: $text-white;
}

.filter-text {
	font-size: $font-size-base;
	font-weight: 500;
	color: $text-white;
}

/* 筛选面板 */
.filter-panel {
	margin: 0 $spacing-lg $spacing-lg;
	background: $white;
	border-radius: $border-radius-lg;
	box-shadow: $shadow-base;
	overflow: hidden;
}

.filter-content {
	padding: $spacing-xl;
}

.filter-title {
	margin-bottom: $spacing-lg;
	padding-bottom: $spacing-md;
	border-bottom: 1rpx solid $border-light;
}

.title-text {
	font-size: $font-size-lg;
	font-weight: 600;
	color: $text-primary;
}

.filter-form {
	display: flex;
	flex-direction: column;
	gap: $spacing-lg;
	margin-bottom: $spacing-xl;
}

.form-item {
	display: flex;
	flex-direction: column;
	gap: $spacing-sm;
}

.item-label {
	font-size: $font-size-base;
	font-weight: 500;
	color: $text-primary;
}

.item-picker {
	width: 100%;
}

.picker-value {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-md $spacing-lg;
	background: $gray-50;
	border-radius: $border-radius-base;
	border: 1rpx solid $border-color;
	transition: $transition-base;

	&:active {
		background: $gray-100;
		border-color: $primary-color;
	}
}

.value-text {
	font-size: $font-size-base;
	color: $text-primary;
}

.picker-arrow {
	font-size: $font-size-xl;
	color: $text-secondary;
	transform: rotate(0deg);
	transition: $transition-base;
}

.filter-actions {
	display: flex;
	gap: $spacing-md;
}

.action-btn {
	flex: 1;
	padding: $spacing-md;
	border-radius: $border-radius-base;
	transition: $transition-base;

	&.reset-btn {
		background: $gray-100;
		border: 1rpx solid $border-color;

		&:active {
			background: $gray-200;
		}
	}

	&.search-btn {
		background: $primary-color;

		&:active {
			background: $primary-dark;
		}
	}
}

.btn-text {
	font-size: $font-size-base;
	font-weight: 500;
	text-align: center;

	.reset-btn & {
		color: $text-secondary;
	}

	.search-btn & {
		color: $text-white;
	}
}

/* 巡查列表 */
.patrol-list {
	flex: 1;
	padding: 0 $spacing-lg;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: $spacing-xxl;
	text-align: center;
}

.empty-icon {
	margin-bottom: $spacing-lg;
}

.icon-large {
	font-size: 120rpx;
	opacity: 0.3;
}

.empty-title {
	font-size: $font-size-lg;
	font-weight: 500;
	color: $text-secondary;
	margin-bottom: $spacing-sm;
}

.empty-desc {
	font-size: $font-size-sm;
	color: $text-muted;
	line-height: 1.5;
}

/* 巡查项目卡片 */
.patrol-item {
	margin-bottom: $spacing-lg;
}

.item-card {
	background: $white;
	border-radius: $border-radius-lg;
	box-shadow: $shadow-sm;
	overflow: hidden;
	transition: $transition-base;

	&:active {
		transform: scale(0.98);
		box-shadow: $shadow-base;
	}
}

/* 卡片头部 */
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: $spacing-lg $spacing-lg $spacing-md;
	border-bottom: 1rpx solid $border-light;
}

.header-left {
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

.create-time {
	font-size: $font-size-sm;
	color: $text-secondary;
}

.patrol-id {
	font-size: $font-size-xs;
	color: $text-muted;
}

.header-right {
	display: flex;
	align-items: center;
}

/* 状态标签 */
.status-badge {
	padding: $spacing-xs $spacing-sm;
	border-radius: $border-radius-sm;
	font-size: $font-size-xs;
	font-weight: 500;

	&.status-passed {
		background: rgba(82, 196, 26, 0.1);
		color: $success-color;
	}

	&.status-failed {
		background: rgba(255, 77, 79, 0.1);
		color: $error-color;
	}

	&.status-pending {
		background: rgba(250, 173, 20, 0.1);
		color: $warning-color;
	}
}

.status-text {
	font-size: inherit;
	color: inherit;
}

/* 项目名称 */
.project-name {
	padding: $spacing-md $spacing-lg;
	text-align: center;
	border-bottom: 1rpx solid $border-light;
}

.name-text {
	font-size: $font-size-lg;
	font-weight: 600;
	color: $text-primary;
	line-height: 1.4;
}

/* 卡片详情 */
.card-details {
	padding: $spacing-lg;
}

.detail-row {
	display: flex;
	gap: $spacing-md;
	margin-bottom: $spacing-md;

	&:last-child {
		margin-bottom: 0;
	}
}

.detail-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;

	&.full-width {
		flex: 100%;
	}
}

.detail-label {
	font-size: $font-size-sm;
	color: $text-secondary;
}

.detail-value {
	font-size: $font-size-base;
	color: $text-primary;
	font-weight: 500;

	&.score-value {
		color: $primary-color;
		font-weight: 600;
	}

	&.flow-node {
		color: $warning-color;
		font-size: $font-size-sm;
	}
}

/* 卡片操作区域 */
.card-actions {
	padding: $spacing-md $spacing-lg;
	background: $gray-50;
	border-top: 1rpx solid $border-light;
}

.action-tag {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tag-text {
	font-size: $font-size-sm;
	color: $text-secondary;
}

.tag-arrow {
	font-size: $font-size-lg;
	color: $text-muted;
}
</style>